<template>
	<view class="navigator flex_sbc">
		<view></view>
		<view class="z-font-32">选择课程</view>
		<navigator open-type="navigateBack" hover-class="none">
			<image :src="setting.oss_pub_domain + '/app-img/icon/icon-close-grey.png'" class="icon-size"></image>
		</navigator>
	</view>
	<scroll-view scroll-y class="content" @scrolltolower="nextPage">
		<view v-if="type && multiple" class="flex_fsc">
			<view class="uni-ml-24 uni-color-grey">没有合适的课程</view>
			<view class="uni-color-main uni-mx-8" @click="addCourse">新建课程</view>
			<image :src="setting.oss_pub_domain + '/app-img/icon/icon-right-main.png'" class="icon-size-32"></image>
		</view>
		<search-box @search="search" placeholder="搜索课程名称"></search-box>
		<view
			v-for="(course, index) in courseList"
			:key="index"
			:class="['plan-box flex_fs', relCourse.findIndex((item) => item.id === course.id) >= 0 ? 'active' : 'no']"
			@click="selItem(course)"
		>
			<image :src="setting.oss_pub_domain + '/app-img/course/icon.png'" class="icon-size"></image>
			<view class="width-100 uni-ml-16">
				<view class="flex_sbc">
					<view class="z-font-32">{{ course.name }}</view>
					<image
						:src="`${setting.oss_pub_domain}/app-img/icon/icon-checkbox${
							relCourse.findIndex((item) => item.id === course.id) >= 0 ? '' : '-no'
						}.png`"
						class="icon-size-32"
					></image>
				</view>
				<view class="flex_sbc z-font-24 uni-mt-12">
					<view class="uni-color-grey">{{ course.createTime }}</view>
					<view v-if="course.isUp" class="uni-color-main">已开始</view>
					<view v-else class="uni-orange">未开始</view>
				</view>
			</view>
		</view>
	</scroll-view>
	<bottom-box :buts="buts" @change="buttonClick" intervalBg="#FFFFFF" :interval="false"></bottom-box>
</template>

<script setup>
import { getCourseList } from '@/api/course.js';
import { getCourseList as getPlayerCourseList } from '@/api/player.js';
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
const { proxy: that } = getCurrentInstance();

let eventChannel,
	type = ref(0),
	multiple = 0,
	playerInfo = uni.getStorageSync('player-info');
onLoad((opt) => {
	relCourse.value = uni.getStorageSync('select-course') || [];
	type.value = parseInt(opt.type || 0);
	multiple = parseInt(opt.multiple || 0);
	eventChannel = that.getOpenerEventChannel();
	fetchData();
});
// 搜索方案
const query = ref({});
function search(name) {
	pageParms.pageNum = 1;
	query.value.name = name;
	fetchData();
}
const courseList = ref([]),
	pageParms = reactive({
		total: 0,
		pageNum: 1,
		pageSize: 10
	});
function fetchData() {
	const funName = type.value ? getPlayerCourseList : getCourseList;
	const params = { pageNum: pageParms.pageNum, pageSize: pageParms.pageSize, ...query.value };
	if (type.value) {
		params.userId = playerInfo.id;
		params.type = 0;
	}
	funName(params).then((res) => {
		if (pageParms.pageNum === 1) {
			courseList.value = res.rows;
		} else {
			courseList.value.push(...res.rows);
		}
		pageParms.total = res.total;
	});
}
function nextPage() {
	if (courseList.value.length >= pageParms.total) return;
	pageParms.pageNum += 1;
	fetchData();
}
//  选择课程
const relCourse = ref([]);
function selItem(item) {
	if (type.value && !multiple) {
		relCourse.value = [item];
		return;
	}
	const index = relCourse.value.findIndex((el) => el.id === item.id);
	if (index >= 0) relCourse.value.splice(index, 1);
	else relCourse.value.push(item);
}

// 底部按钮
const buts = [
	{
		label: '确定添加',
		bgColor: 'uni-color-main-bg'
	}
];

function buttonClick() {
	eventChannel.emit('relCourse', relCourse.value);
	uni.navigateBack();
}

function addCourse() {
	uni.removeStorageSync('edit-course')
	uni.navigateTo({
		url: '/pages/player/course/course-edit?noQuestion=1',
		events: {
			editDone: data => {
				relCourse.value.push(data)
				buttonClick()
			}
		}
	});
}
</script>

<style lang="scss">
@import '@/assets/select.scss';
</style>